<template>
  <el-row>
    <el-col :span="4" v-for="item in hanji" :key="item.id">
      <el-card :body-style="{ padding: '5px' }" style="text-align: center">
        <div></div>
        <img src="src/assets/img/hanji.png" style="text-align: center" @click="showInfo(item.id)">
        <div>
          <img v-bind:src="item.path" style="vertical-align: middle">
          <span style="vertical-align: middle">{{ item.name }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'hanji',
  data () {
    return {
      // 定时器
      timer0: null,
      param: [],
      // 存储各焊机状态
      eachState: [],
      max_i: '',
      max_p: '',
      hanji: [
        {
          id: '1',
          name: '自动焊机1',
          path: ''
        },
        {
          id: '2',
          name: '自动焊机2',
          path: ''
        },
        {
          id: '3',
          name: '自动焊机3',
          path: ''
        },
        {
          id: '4',
          name: '自动焊机4',
          path: ''
        },
        {
          id: '5',
          name: '自动焊机5',
          path: ''
        },
        {
          id: '6',
          name: '自动焊机6',
          path: ''
        },
        {
          id: '7',
          name: '自动焊机7',
          path: ''
        },
        {
          id: '8',
          name: '自动焊机8',
          path: ''
        },
        {
          id: '9',
          name: '自动焊机9',
          path: ''
        },
        {
          id: '10',
          name: '自动焊机10',
          path: ''
        },
        {
          id: '11',
          name: '自动焊机11',
          path: ''
        },
        {
          id: '12',
          name: '自动焊机12',
          path: ''
        },
        {
          id: '13',
          name: '自动焊机13',
          path: ''
        },
        {
          id: '14',
          name: '自动焊机14',
          path: ''
        },
        {
          id: '15',
          name: '自动焊机15',
          path: ''
        },
        {
          id: '16',
          name: '自动焊机16',
          path: ''
        },
        {
          id: '17',
          name: '自动焊机17',
          path: ''
        },
        {
          id: '18',
          name: '自动焊机18',
          path: ''
        }
      ]
    }
  },
  methods: {
    timer () {
      this.timer0 = setInterval(() => {
        this.gethanji()
      }, 1000)
    },
    gethanji () {
      this.$http({
        url: this.$http.adornUrl('/P2/fault'),
        method: 'get',
      }).then(response => {
        this.param = response.data
        this.showState(this.param)
      })
    },
    showState (shuju) {
      // 通过返回数值选取各设备对应状态
      for (var i = 0; i < 5; i++) {
        this.max_i = 1
        this.max_p = shuju[i][0]
        for (var j = 1; j < 6; j++) {
          if (shuju[i][j] > this.max_p) {
            this.max_i = j + 1
            this.max_p = shuju[i][j]
          }
        }
        this.eachState[i] = this.max_i
      }
      for (var k = 5; k < 15; k++) {
        this.eachState[k] = 1
      }
      for (var m = 15; m < 18; m++) {
        this.eachState[m] = 0
      }
      // 根据各焊机状态显示图标
      for (var t = 0; t < 18; t++) {
        if (this.eachState[t] === 1) {
          this.hanji[t].path = require('@/assets/img/lv.png')
        } else {
          this.hanji[t].path = require('@/assets/img/hong.png')
        }
      }
    },
    showInfo: function (num) {
      this.$router.push({
        path: '/diagnosis/fault_analysis',
        query: {
          equip: 'hanji',
          num: num,
          res: this.param[num - 1]
        }
      })
    }
  },
  created () {
    this.timer()
  },
  beforeDestroy () {
    if (this.timer0) {
      clearInterval(this.timer0)
    }
  }
}
</script>

<style scoped>

</style>
